<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>8. Vue移动端 文章页面内容和功能 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vant, Vue, Vue移动端" />
  
  <meta name="description" content="::: tip 介绍 Vue移动端 文章内容 点赞 关注 评论 等功能:::">
<meta property="og:type" content="article">
<meta property="og:title" content="8. Vue移动端 文章页面内容和功能">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/12/Vue_Mobile_Projects/9_Articles/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍 Vue移动端 文章内容 点赞 关注 评论 等功能:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-11T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.547Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vue移动端">
<meta property="article:tag" content="Vant">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">8. Vue移动端 文章页面内容和功能</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-12</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~18.20K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178547"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍</p>
<p>Vue移动端 文章内容 点赞 关注 评论 等功能<br><br>:::</p>
<span id="more"></span>

<h2 id="配置文章详情路由-index-js"><a href="#配置文章详情路由-index-js" class="headerlink" title="配置文章详情路由 index.js"></a>配置文章详情路由 <code>index.js</code></h2><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/cell">Cell 单元格 Vant插件</a></p>
<blockquote>
<p>目标：配置文章详情组件路由</p>
</blockquote>
<ul>
<li>配置文章内容的编程式导航(动态导航)的路由 <code>router文件夹 里面 index.js</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> detail <span class="keyword">from</span> <span class="string">&#x27;../views/detail/detail&#x27;</span></span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/detail&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: detail</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>设置文章点击后 编程式导航 携带文章id值 跳转到文章页面 <code>search文件夹 里面 sresult.vue</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 把服务器获取的数据 渲染到页面上 id需要 toString()一下 因为用了 json-bigint解决了id太长js不识别问题 --&gt;</span><br><span class="line">&lt;!-- @click点击事件 设置点击搜索到的文章进行动态路由携带文章i 值跳转到文章内容页面 让id强制转换成字符串.toString() --&gt;</span><br><span class="line">	&lt;van-cell @click=&#x27;$router.push(&quot;/detail?id=&quot;+item.art_id.toString())&#x27; v-for=&quot;item in list&quot; :key=&#x27;item.art_id.toString()&#x27;&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>基于问号方式传递路由参数</li>
<li>vant-cell组件支持路由跳转</li>
</ol>
</blockquote>
<h2 id="获取文章详情数据-detail-vue"><a href="#获取文章详情数据-detail-vue" class="headerlink" title="获取文章详情数据 detail.vue"></a>获取文章详情数据 <code>detail.vue</code></h2><blockquote>
<p>目标：在新的文章内容页面(新组件) 显示相应的文章数据 <code>components文件夹 里面 ArticleComment.vue</code></p>
<p>效果: 点击进入文章后 显示相应的文章数据</p>
<p>原理: 通过 编程式导航(动态路由) 携带的文章id值 上传到服务器 获取服务器返回的详细文章数据</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/005INI3Xly8grjdmxwbuzj30860ejwgi.jpg" alt="image-20210615205914591"></p>
<h3 id="封装接口调用方法-api文件夹-里面-search-js"><a href="#封装接口调用方法-api文件夹-里面-search-js" class="headerlink" title="封装接口调用方法 api文件夹 里面 search.js"></a>封装接口调用方法 <code>api文件夹 里面 search.js</code></h3><ul>
<li>创建一个获取文章数据的api接口</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 获取文章的详情数据</span></span><br><span class="line"><span class="comment">// ? 设置形参 接收文章的id值</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getDetailById</span> = (<span class="params">articleId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="comment">// ? 地址拼接文章的id值 获取服务器返回的文章数据</span></span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/articles/&#x27;</span> + articleId</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="文章页面-获取对应的文章数据和功能-detail-vue"><a href="#文章页面-获取对应的文章数据和功能-detail-vue" class="headerlink" title="文章页面 获取对应的文章数据和功能 detail.vue"></a>文章页面 获取对应的文章数据和功能 <code>detail.vue</code></h3><ul>
<li><code>template</code> 模板<ul>
<li>文章内容数据获取</li>
<li>设置关注功能 利用三元表达式</li>
<li>设置点赞功能 不喜欢功能 <ul>
<li>点赞 不喜欢功能 都是一个方法 一个api接口 通过<code>@click</code>事件携带不同参数 判断哪个按钮点击</li>
<li>点赞 不喜欢功能状态位 1是点赞 0是不喜欢 -1是没操作</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&#x27;container&#x27; ref=&quot;container&quot;&gt;</span><br><span class="line">    &lt;!-- $router.back()是返回之前的路由 --&gt;</span><br><span class="line">    &lt;van-nav-bar fixed title=&quot;文章详情&quot; left-arrow @click-left=&quot;$router.back()&quot; /&gt;</span><br><span class="line">    &lt;div class=&quot;detail&quot; v-if=&quot;article&quot;&gt;</span><br><span class="line">      &lt;h3 class=&quot;title&quot;&gt;&#123;&#123;article.title&#125;&#125;&lt;/h3&gt;</span><br><span class="line">      &lt;div class=&quot;author&quot;&gt;</span><br><span class="line">        &lt;!-- 动态获取文章作者的头像 --&gt;</span><br><span class="line">        &lt;van-image round width=&quot;1rem&quot; height=&quot;1rem&quot; fit=&quot;fill&quot; :src=&quot;article.aut_photo&quot; /&gt;</span><br><span class="line">        &lt;div class=&quot;text&quot;&gt;</span><br><span class="line">          &lt;p class=&quot;name&quot;&gt;&#123;&#123;article.aut_name&#125;&#125;&lt;/p&gt;</span><br><span class="line">          &lt;p class=&quot;time&quot;&gt;&#123;&#123;article.pubdate|formatTime&#125;&#125;&lt;/p&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;van-button @click=&#x27;toggleFocus&#x27; round size=&quot;small&quot; type=&quot;info&quot;&gt;</span><br><span class="line">          &lt;!-- 点赞功能 三元表达 来判断 是否已经关注 --&gt;</span><br><span class="line">          &#123;&#123;article.is_followed?&#x27;已关注&#x27;:&#x27;+ 关注&#x27;&#125;&#125;</span><br><span class="line">        &lt;/van-button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;!-- 文章内容 --&gt;</span><br><span class="line">      &lt;div class=&quot;content&quot; v-html=&quot;article.content&quot;&gt;&lt;/div&gt;</span><br><span class="line">      &lt;div class=&quot;zan&quot;&gt;</span><br><span class="line">        &lt;!-- 点赞功能 点赞有三个状态位 1是点赞 0是不喜欢 -1是没操作(不用写) --&gt;</span><br><span class="line">        &lt;!-- :class动态添加类名 如果状态位是1的时候 显示点赞的样式 --&gt;</span><br><span class="line">        &lt;!-- @click 设置点击事件 用来判断点击的是哪个按钮(并不是传递参数 判断是否点赞参数是服务器返回的值) --&gt;</span><br><span class="line">        &lt;van-button @click=&quot;toggleStatus(0)&quot; round size=&quot;small&quot; :class=&quot;&#123;active:article.attitude===1&#125;&quot; plain icon=&quot;like-o&quot;&gt;点赞&lt;/van-button&gt;</span><br><span class="line">        &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span><br><span class="line">        &lt;!-- :class动态添加类名 如果状态位是0的时候 显示不喜欢的样式 --&gt;</span><br><span class="line">        &lt;!-- @click 设置点击事件 用来判断点击的是哪个按钮 --&gt;</span><br><span class="line">        &lt;van-button @click=&quot;toggleStatus(1)&quot; round size=&quot;small&quot; :class=&quot;&#123;active:article.attitude===0&#125;&quot; plain icon=&quot;delete&quot;&gt;不喜欢&lt;/van-button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>style</code> 样式</li>
</ul>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span> <span class="selector-tag">scoped</span> <span class="selector-tag">lang</span>=&#x27;<span class="selector-tag">less</span>&#x27;&gt;</span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">overflow-y</span>: auto;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.detail</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">92px</span> <span class="number">20px</span> <span class="number">88px</span>;</span><br><span class="line">  <span class="comment">// height: 1000%;</span></span><br><span class="line">  <span class="selector-class">.title</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">36px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">2</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.zan</span> &#123;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="selector-class">.active</span> &#123;</span><br><span class="line">      <span class="attribute">border-color</span>: red;</span><br><span class="line">      <span class="attribute">color</span>: red;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.author</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="selector-class">.text</span> &#123;</span><br><span class="line">      <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">      <span class="attribute">padding-left</span>: <span class="number">20px</span>;</span><br><span class="line">      <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">      <span class="selector-class">.name</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">28px</span>;</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-class">.time</span> &#123;</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">        <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.content</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">40px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">white-space</span>: pre-wrap;</span><br><span class="line">    <span class="attribute">word-break</span>: break-all;</span><br><span class="line">    /<span class="selector-tag">deep</span>/ <span class="selector-tag">img</span> &#123;</span><br><span class="line">      <span class="attribute">max-width</span>: <span class="number">100%</span>;</span><br><span class="line">      <span class="attribute">background</span>: <span class="number">#f9f9f9</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    /<span class="selector-tag">deep</span>/ <span class="selector-tag">code</span> &#123;</span><br><span class="line">      <span class="attribute">white-space</span>: pre-wrap;</span><br><span class="line">    &#125;</span><br><span class="line">    /<span class="selector-tag">deep</span>/ <span class="selector-tag">pre</span> &#123;</span><br><span class="line">      <span class="attribute">white-space</span>: pre-wrap;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/<span class="selector-tag">style</span>&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 导入获取文章api接口</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 导入api接口组件</span></span><br><span class="line"><span class="keyword">import</span> &#123; getDetailById, unFollowArticle, followArticle, likes, unlikes, undislikes, dislikes &#125; <span class="keyword">from</span> <span class="string">&#x27;../../api/search&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>data()</code>存储数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">data () &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="comment">// ~ 接收服务器返回的数据(设置为空对象null) 服务器返回多个数据通常需要用对象储存</span></span><br><span class="line">    <span class="attr">article</span>: <span class="literal">null</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本  <code> methods</code> 函数方法</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 获取文章详情数据</span></span><br><span class="line"> <span class="keyword">async</span> getDetailById () &#123;</span><br><span class="line">   <span class="comment">// ? 通过编程式导航(动态路由) 传来的数据 和服务器进行比对 获取相应的文章数据</span></span><br><span class="line">   <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">getDetailById</span>(<span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">id</span>)</span><br><span class="line">   <span class="comment">// ? 把获取的数据储存到页面上</span></span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">article</span> = ret.<span class="property">data</span></span><br><span class="line"> &#125;,</span><br></pre></td></tr></table></figure>

<h2 id="文章关注与取消关注-detail-vue"><a href="#文章关注与取消关注-detail-vue" class="headerlink" title="文章关注与取消关注 detail.vue"></a>文章关注与取消关注 <code>detail.vue</code></h2><blockquote>
<p>目标：实现点击关注作者 或者 点击取消关注作者</p>
<p>效果:  点击后关注 如果已关注 点击后取消关注</p>
<p>原理: 获取服务器返回的关注状态 再利用三元表达式 设置关注按钮</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/005INI3Xly8grjbjypxnij30940f975s.jpg" alt="image-20210615222641041"></p>
<h3 id="封装关注与取消关注api接口search-js"><a href="#封装关注与取消关注api接口search-js" class="headerlink" title="封装关注与取消关注api接口search.js"></a>封装关注与取消关注api接口<code>search.js</code></h3><ul>
<li>两个接口 一个关注接口 一个取消关注接口</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ? 关注文章的接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">followArticle</span> = (<span class="params">userId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/user/followings&#x27;</span>,</span><br><span class="line">    <span class="comment">// ? post方法 需要携带 data比对数据</span></span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">target</span>: userId</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ? 取消关注文章的接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">unFollowArticle</span> = (<span class="params">userId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;delete&#x27;</span>,</span><br><span class="line">    <span class="comment">// ? 拼接id</span></span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/user/followings/&#x27;</span> + userId</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="文章内容页面-实现关注功能-detail-vue"><a href="#文章内容页面-实现关注功能-detail-vue" class="headerlink" title="文章内容页面 实现关注功能 detail.vue"></a>文章内容页面 实现关注功能 <code>detail.vue</code></h3><ul>
<li><code>script</code> 脚本 导入关注api接口</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 导入api接口组件</span></span><br><span class="line"><span class="keyword">import</span> &#123; getDetailById, unFollowArticle, followArticle, likes, unlikes, undislikes, dislikes &#125; <span class="keyword">from</span> <span class="string">&#x27;../../api/search&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本  <code> methods</code> 函数方法<ul>
<li>判断用户的状态位 如果关注了 再次点击 进行取消关注方法</li>
<li>如果没关注 再次点击 进行关注方法</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 关注或者取消关注文章的操作</span></span><br><span class="line">  <span class="keyword">async</span> toggleFocus () &#123;</span><br><span class="line">    <span class="comment">// ~ 判断用户是否关注了内容</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">is_followed</span>) &#123;</span><br><span class="line">      <span class="comment">// ~ 如果用户关注了该用户 此时点击后让关注按钮(is_followed)变为false 取消其关注</span></span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="comment">// ~ 获取服务器 返回关注的状态位</span></span><br><span class="line">        <span class="keyword">await</span> <span class="title function_">unFollowArticle</span>(<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">aut_id</span>)</span><br><span class="line">        <span class="comment">// ~ 设置下次点击后 让其取消关注(已经关注的操作)</span></span><br><span class="line">        <span class="comment">// ~ 关注的状态位 已经储存到了data()里的对象中</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">is_followed</span> = !<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">is_followed</span> <span class="comment">// 也可以固定为false</span></span><br><span class="line">      &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        <span class="comment">// ~ 未知原因没有成功取消关注 提示用户(Vant轻提示组件)</span></span><br><span class="line">        <span class="variable language_">this</span>.$toast(<span class="string">&#x27;取消关注失败&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// ~ 如果用户没有关注 此时点击后让关注按钮(is_followed)变为true 进行关注</span></span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="comment">// ~ 获取服务器 返回关注的状态位</span></span><br><span class="line">        <span class="keyword">await</span> <span class="title function_">followArticle</span>(<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">aut_id</span>)</span><br><span class="line">        <span class="comment">// ~ 设置下次点击后 让其关注(没有关注的操作)</span></span><br><span class="line">        <span class="comment">// ~ 关注的状态位 已经储存到了data()里的对象中</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">is_followed</span> = !<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">is_followed</span> <span class="comment">// 也可以固定为true</span></span><br><span class="line">      &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">        <span class="comment">// ~ 未知原因没有成功关注 提示用户(Vant轻提示组件)</span></span><br><span class="line">        <span class="variable language_">this</span>.$toast(<span class="string">&#x27;关注失败&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>



<blockquote>
<p>总结：</p>
<ol>
<li>调用接口实现功能</li>
<li>async函数的异常处理必须有await，否则catch无法执行，因为Promise会使用catch方法处理异常。</li>
</ol>
</blockquote>
<h2 id="文章点赞与不喜欢-detail-vue"><a href="#文章点赞与不喜欢-detail-vue" class="headerlink" title="文章点赞与不喜欢 detail.vue"></a>文章点赞与不喜欢 <code>detail.vue</code></h2><blockquote>
<p>目标：实现文章点赞与不喜欢功能</p>
<p>效果:  点赞 和 不喜欢功能 点击后 让其显示样式 两个按钮属于互斥按钮 </p>
<p>原理:  和关注功能大致一样 只不过两个按钮是互斥按钮 并且两个点击事件使用相同点击方法 需要区分两个按钮</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/005INI3Xly8grjdpxjnl3j30aa0i4q3t.jpg" alt="image-20210615221845811"></p>
<h3 id="封装点赞-和-不喜欢的-api接口search-js"><a href="#封装点赞-和-不喜欢的-api接口search-js" class="headerlink" title="封装点赞 和 不喜欢的 api接口search.js"></a>封装点赞 和 不喜欢的 api接口<code>search.js</code></h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 点赞接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">likes</span> = (<span class="params">articleId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/article/likings&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">target</span>: articleId</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//! 取消点赞接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">unlikes</span> = (<span class="params">articleId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;delete&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/article/likings/&#x27;</span> + articleId</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//! 添加【不喜欢】接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">dislikes</span> = (<span class="params">articleId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/article/dislikes&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">target</span>: articleId</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//! 取消【不喜欢】接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">undislikes</span> = (<span class="params">articleId</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;delete&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/article/dislikes/&#x27;</span> + articleId</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="实现点赞-不喜欢功能-detail-vue"><a href="#实现点赞-不喜欢功能-detail-vue" class="headerlink" title="实现点赞 不喜欢功能 detail.vue"></a>实现点赞 不喜欢功能 <code>detail.vue</code></h3><ul>
<li><code>template</code> 模板(主模板已经设置)<ul>
<li>因为是相同的点击事件 需要设置参数 判断是哪个按钮点击</li>
<li>点赞功能 不喜欢有三个状态位 是共用的 1是点赞 0是不喜欢 -1是没操作(不用写)</li>
<li>需要设置互斥功能<ul>
<li>使用相同的状态位即可 如果状态位是 1 设置给点赞样式 如果是0 设置给不喜欢样式</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;zan&quot;&gt;</span><br><span class="line">  &lt;!-- 点赞功能 不喜欢有三个状态位 是共用的 1是点赞 0是不喜欢 -1是没操作(不用写) --&gt;</span><br><span class="line">  &lt;!-- @click 设置点击事件 用来判断点击的是哪个按钮(并不是传递参数 判断是否点赞参数是服务器返回的值) --&gt;</span><br><span class="line">  &lt;!-- 点赞 不喜欢是互斥功能 当点击喜欢时候 :class 动态类名绑定给 点赞功能 让其点亮 --&gt;</span><br><span class="line">  &lt;van-button @click=&quot;toggleStatus(0)&quot; round size=&quot;small&quot; :class=&quot;&#123;active:article.attitude===1&#125;&quot; plain icon=&quot;like-o&quot;&gt;点赞&lt;/van-button&gt;</span><br><span class="line">  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span><br><span class="line">  &lt;!-- :class动态添加类名 如果状态位是0的时候 显示不喜欢的样式 --&gt;</span><br><span class="line">  &lt;!-- @click 设置点击事件 用来判断点击的是哪个按钮 --&gt;</span><br><span class="line">  &lt;!-- 点赞 不喜欢是互斥功能 当点击不喜欢的时候 :class 动态类名绑定给 不喜欢功能 让其点亮 --&gt;</span><br><span class="line">  &lt;van-button @click=&quot;toggleStatus(1)&quot; round size=&quot;small&quot; :class=&quot;&#123;active:article.attitude===0&#125;&quot; plain icon=&quot;delete&quot;&gt;不喜欢&lt;/van-button&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本  <code> methods</code> 函数方法<ul>
<li>因为是相同的点击事件 需要判断携带的参数 来区分按钮</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//! 实现点赞效果(4种操作：点赞和取消点赞，不喜欢和取消不喜欢)</span></span><br><span class="line">  <span class="comment">//! 需要判断 是哪个按钮触发 接收template模板传来的点击参数 来分辨是哪个按钮</span></span><br><span class="line">  <span class="keyword">async</span> toggleStatus (type) &#123;</span><br><span class="line">    <span class="comment">//! 0 是点赞按钮(template模板设置) -------------------</span></span><br><span class="line">    <span class="keyword">if</span> (type === <span class="number">0</span>) &#123;</span><br><span class="line">      <span class="comment">//! 点击了点赞按钮：点赞/取消点赞</span></span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">attitude</span> === <span class="number">1</span>) &#123; <span class="comment">//! 状态为是1的话 说明已经点赞了 再次点击按钮取消赞的状态位</span></span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          <span class="comment">//! 把取消点赞的状态位 上传到服务器上</span></span><br><span class="line">          <span class="keyword">await</span> <span class="title function_">unlikes</span>(<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">art_id</span>.<span class="title function_">toString</span>())</span><br><span class="line">          <span class="comment">//! 在页面上取消点赞状态位</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">attitude</span> = -<span class="number">1</span> <span class="comment">//! -1是不点赞的状态位</span></span><br><span class="line">        &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">          <span class="comment">//! 如果不成功设置提醒 提示用户(Vant轻提示组件)</span></span><br><span class="line">          <span class="variable language_">this</span>.$toast(<span class="string">&#x27;取消点赞失败&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123; <span class="comment">//! 否则 不等于1就是说明没点赞 再次点击按钮设置点赞状态位</span></span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          <span class="comment">//! 把点赞的状态位 上传到服务器上</span></span><br><span class="line">          <span class="keyword">await</span> <span class="title function_">likes</span>(<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">art_id</span>.<span class="title function_">toString</span>())</span><br><span class="line">          <span class="comment">//! 在页面上设置点赞状态位</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">attitude</span> = <span class="number">1</span> <span class="comment">//! 1是点赞的状态位</span></span><br><span class="line">        &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">          <span class="comment">//! 如果不成功设置提醒</span></span><br><span class="line">          <span class="variable language_">this</span>.$toast(<span class="string">&#x27;点赞失败&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//! 1 是不喜欢按钮(template模板设置) -----------------</span></span><br><span class="line">    <span class="keyword">if</span> (type === <span class="number">1</span>) &#123;</span><br><span class="line">      <span class="comment">//! 点击了不喜欢按钮：不喜欢/取消不喜欢</span></span><br><span class="line">      <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">attitude</span> === <span class="number">0</span>) &#123; <span class="comment">//! 状态位是0的话 说明已经不喜欢了 再次点击按钮取取消不喜欢状态位</span></span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          <span class="comment">//! 把取消不喜欢的状态位 上传到服务器上</span></span><br><span class="line">          <span class="keyword">await</span> <span class="title function_">undislikes</span>(<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">art_id</span>.<span class="title function_">toString</span>())</span><br><span class="line">          <span class="comment">//! 在页面上取消不喜欢的状态位</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">attitude</span> = -<span class="number">1</span> <span class="comment">//! -1取消不喜欢额状态位</span></span><br><span class="line">        &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">          <span class="comment">//! 如果不成功设置提醒</span></span><br><span class="line">          <span class="variable language_">this</span>.$toast(<span class="string">&#x27;取消不喜欢失败&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123; <span class="comment">//! 否则 不等于0就是说明 没有设置不喜欢 再次点击按钮设置不喜欢状态位</span></span><br><span class="line">        <span class="keyword">try</span> &#123;</span><br><span class="line">          <span class="comment">//! 把不喜欢的状态位 上传到服务器上</span></span><br><span class="line">          <span class="keyword">await</span> <span class="title function_">dislikes</span>(<span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">art_id</span>.<span class="title function_">toString</span>())</span><br><span class="line">          <span class="comment">//! 在页面上设置不喜欢状态位</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">article</span>.<span class="property">attitude</span> = <span class="number">0</span></span><br><span class="line">        &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">          <span class="comment">//! 如果不成功设置提醒</span></span><br><span class="line">          <span class="variable language_">this</span>.$toast(<span class="string">&#x27;取消不喜欢失败&#x27;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>逻辑分支比较多，先宏观再微观（先做大的分支处理，再做细节）</li>
</ol>
</blockquote>
<h2 id="文章评论模块-ArticleComment-vue"><a href="#文章评论模块-ArticleComment-vue" class="headerlink" title="文章评论模块 ArticleComment.vue"></a>文章评论模块 <code>ArticleComment.vue</code></h2><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/list">Vant list 组件实现</a></p>
<blockquote>
<p>目标：实现评论列表数据动态渲染</p>
<p>效果:  上滑评论区 获取服务器评论数据 并且自己也可以输入评论 上传到服务器 打印在评论区中</p>
<p>原理:  根据文章的id 获取服务器评论数据 打印到页面上 上滑根据评论数据id 实现评论分页 </p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/005INI3Xly8grjchgwoymj30880emgmx.jpg" alt="image-20210615221845811"></p>
<h3 id="评论区单独组件设置-ArticleComment-vue"><a href="#评论区单独组件设置-ArticleComment-vue" class="headerlink" title="评论区单独组件设置 ArticleComment.vue"></a>评论区单独组件设置 <code>ArticleComment.vue</code></h3><ul>
<li><code>template</code> 模板</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;comment&quot;&gt;</span><br><span class="line">    &lt;!-- 评论列表 --&gt;</span><br><span class="line">    &lt;!-- 设置Vant组件list 提供的 @load上滑获取列表方法(分页) 实现评论加载 --&gt;</span><br><span class="line">    &lt;van-list v-model=&quot;loading&quot; :finished=&quot;finished&quot; finished-text=&quot;没有更多了&quot; @load=&quot;onLoad&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;item van-hairline--bottom van-hairline--top&quot; v-for=&quot;comment in list&quot; :key=&quot;comment.com_id.toString()&quot;&gt;</span><br><span class="line">        &lt;!-- 动态获取评论用户的头像 --&gt;</span><br><span class="line">        &lt;van-image round width=&quot;1rem&quot; height=&quot;1rem&quot; fit=&quot;fill&quot; :src=&quot;comment.aut_photo&quot; /&gt;</span><br><span class="line">        &lt;div class=&quot;info&quot;&gt;</span><br><span class="line">          &lt;p&gt;</span><br><span class="line">            &lt;span class=&quot;name&quot;&gt;&#123;&#123;comment.aut_name&#125;&#125;&lt;/span&gt;</span><br><span class="line">            &lt;span style=&quot;float:right&quot;&gt;</span><br><span class="line">              &lt;span class=&quot;van-icon van-icon-good-job-o zan&quot;&gt;&lt;/span&gt;</span><br><span class="line">              &lt;span class=&quot;count&quot;&gt;&#123;&#123;comment.like_count&#125;&#125;&lt;/span&gt;</span><br><span class="line">            &lt;/span&gt;</span><br><span class="line">          &lt;/p&gt;</span><br><span class="line">          &lt;p&gt;&#123;&#123;comment.content&#125;&#125;&lt;/p&gt;</span><br><span class="line">          &lt;p&gt;</span><br><span class="line">            &lt;span class=&quot;time&quot;&gt;&#123;&#123;comment.pubdate|formatTime&#125;&#125;&lt;/span&gt;&amp;nbsp;</span><br><span class="line">            &lt;van-tag plain @click=&quot;showReply=true&quot;&gt;&#123;&#123;comment.reply_count&#125;&#125;&lt;/van-tag&gt;</span><br><span class="line">          &lt;/p&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    &lt;/van-list&gt;</span><br><span class="line">    &lt;!-- 底部输入框 --&gt;</span><br><span class="line">    &lt;div class=&quot;reply-container van-hairline--top&quot;&gt;</span><br><span class="line">      &lt;van-field v-model=&quot;value&quot; placeholder=&quot;写评论...&quot;&gt;</span><br><span class="line">        &lt;span class=&quot;submit&quot; slot=&quot;button&quot; @click=&quot;sendComment&quot;&gt;提交&lt;/span&gt;</span><br><span class="line">      &lt;/van-field&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>style</code> 样式</li>
</ul>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">style</span> <span class="selector-tag">scoped</span> <span class="selector-tag">lang</span>=&#x27;<span class="selector-tag">less</span>&#x27;&gt;</span><br><span class="line"><span class="selector-class">.comment</span> &#123;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">20px</span>;</span><br><span class="line">  /<span class="selector-tag">deep</span>/ <span class="selector-class">.item</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="selector-class">.info</span> &#123;</span><br><span class="line">      <span class="attribute">flex</span>: <span class="number">1</span>;</span><br><span class="line">      <span class="attribute">padding-left</span>: <span class="number">20px</span>;</span><br><span class="line">      <span class="selector-class">.name</span> &#123;</span><br><span class="line">        <span class="attribute">color</span>: <span class="number">#069</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-class">.zan</span> &#123;</span><br><span class="line">        <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">        <span class="attribute">padding-right</span>: <span class="number">4px</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-class">.count</span> &#123;</span><br><span class="line">        <span class="attribute">vertical-align</span>: middle;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">        <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-class">.time</span> &#123;</span><br><span class="line">        <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="selector-tag">p</span> &#123;</span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">0</span>;</span><br><span class="line">        <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  /<span class="selector-tag">deep</span>/ <span class="selector-class">.van-button</span><span class="selector-pseudo">:active</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: transparent;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.reply-container</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">88px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#f5f5f5</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">9999</span>;</span><br><span class="line">  <span class="selector-class">.submit</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#3296fa</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/<span class="selector-tag">style</span>&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本 <code>data()</code>存储数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">data () &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="comment">// 评论的内容 v-model双向绑定页面评论输入</span></span><br><span class="line">    <span class="attr">value</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="comment">// 评论列表加载状态位  Vant插件的list功能</span></span><br><span class="line">    <span class="comment">// 单次加载的状态位</span></span><br><span class="line">    <span class="attr">loading</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="comment">// 加载完成的状态位</span></span><br><span class="line">    <span class="attr">finished</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="comment">// 分页参数(评论数据的id)设置为null是从第一条评论开始获取(不传值默认第一条)</span></span><br><span class="line">    <span class="attr">offset</span>: <span class="literal">null</span>,</span><br><span class="line">    <span class="comment">// 储存服务器返回的评论数据</span></span><br><span class="line">    <span class="attr">list</span>: []</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：评论列表和评论表单基本布局。</p>
<ol>
<li>局部组件的基本使用：再配置，再导入,最后使用</li>
</ol>
</blockquote>
<h3 id="封装获取评论区数据的api接口-search-js"><a href="#封装获取评论区数据的api接口-search-js" class="headerlink" title="封装获取评论区数据的api接口  search.js"></a>封装获取评论区数据的api接口  <code>search.js</code></h3><ul>
<li>封装评论区数据的接口 和 上传评论的接口</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取文章的评论</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">getComments</span> = (<span class="params">articleId, offset</span>) =&gt; &#123; <span class="comment">// 两个参数 评论文章的id/回复文章id 和 分页的参数(评论条的id)</span></span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/comments&#x27;</span>,</span><br><span class="line">    <span class="attr">params</span>: &#123;</span><br><span class="line">      <span class="comment">// a表示文章的评论;c表示回复评论的数据</span></span><br><span class="line">      <span class="attr">type</span>: <span class="string">&#x27;a&#x27;</span>,</span><br><span class="line">      <span class="comment">// 评论的文章的id或者，回复的评论的id</span></span><br><span class="line">      <span class="attr">source</span>: articleId,</span><br><span class="line">      <span class="comment">// 分页参数(评论数据的id)设置为null是从第一条评论开始获取(不传值默认第一条)</span></span><br><span class="line">      <span class="attr">offset</span>: offset,</span><br><span class="line">      <span class="comment">// 每页的条数</span></span><br><span class="line">      <span class="attr">limit</span>: <span class="number">10</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 上传评论接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> <span class="title function_">comment</span> = (<span class="params">options</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">request</span>(&#123;</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;v1_0/comments&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="comment">// 文章的id</span></span><br><span class="line">      <span class="attr">target</span>: options.<span class="property">target</span>,</span><br><span class="line">      <span class="comment">// 评论内容</span></span><br><span class="line">      <span class="attr">content</span>: options.<span class="property">content</span>,</span><br><span class="line">      <span class="comment">// 如果参数target是文章id，那么这个参数不需要</span></span><br><span class="line">      <span class="comment">// 如果参数target是评论id，那么这个参数表示文章id(回复评论时候用到)</span></span><br><span class="line">      <span class="attr">art_id</span>: options.<span class="property">articleId</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：熟悉基于offset的分页策略：根据文章评论的id进行排序和分页，类似于基于时间戳的分页方式。</p>
</blockquote>
<h3 id="文章内容界面-导入评论区组件-detail-vue"><a href="#文章内容界面-导入评论区组件-detail-vue" class="headerlink" title="文章内容界面 导入评论区组件 detail.vue"></a>文章内容界面 导入评论区组件 <code>detail.vue</code></h3><ul>
<li><code>script</code>脚本</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入评论组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ArticleComment</span> <span class="keyword">from</span> <span class="string">&#x27;../../components/ArticleComment.vue&#x27;</span></span><br><span class="line"><span class="attr">components</span>: &#123;</span><br><span class="line">    <span class="comment">// 导入评论组件</span></span><br><span class="line">    <span class="title class_">ArticleComment</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>template</code>模板<ul>
<li>把文章id 创给评论区(子组件) 让其携带文章id 获取相应的评论数据</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 设置评论的组件 给子组件传此文章的id值 --&gt;</span><br><span class="line">    &lt;!-- 需要进行判断 因为article初始值为null 当获取到服务器返回的数据时候 才会有内容 所以需要判断 如果为空(false)不显示此功能--&gt;</span><br><span class="line">    &lt;ArticleComment v-if=&quot;article&quot; :articleId=&quot;article.art_id.toString()&quot;&gt;&lt;/ArticleComment&gt;</span><br></pre></td></tr></table></figure>

<h3 id="实现-评论区数据的获取渲染ArticleComment-vue"><a href="#实现-评论区数据的获取渲染ArticleComment-vue" class="headerlink" title="实现 评论区数据的获取渲染ArticleComment.vue"></a>实现 评论区数据的获取渲染<code>ArticleComment.vue</code></h3><p><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/#/zh-CN/list">Vant list 组件实现</a></p>
<p>通过id分页方式 获取评论数据</p>
<ul>
<li><code>script</code>脚本</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入获取评论的api接口</span></span><br><span class="line"><span class="keyword">import</span> &#123; getComments, comment &#125; <span class="keyword">from</span> <span class="string">&#x27;../api/search&#x27;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code>脚本 <code>props:</code> 接收父组件传来的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">props</span>: &#123;</span><br><span class="line">  <span class="comment">// 获取父组件传来的文章id值 用于获取用户评论</span></span><br><span class="line">  <span class="attr">articleId</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">String</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>script</code> 脚本  <code> methods</code> 函数方法<ul>
<li>基于数据id排序: 每加载一组数据(后端规定 10条一般) 服务器都会返回一个 id值 储存id值 上传到服务器 服务器根据id值 返回新的分页数据 如果id不返回 说明没有数据 分页结束</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置获取评论数据的方法</span></span><br><span class="line">  <span class="keyword">async</span> onLoad () &#123;</span><br><span class="line">    <span class="comment">// 参数1 根据改文章的id 父组件传入的数值</span></span><br><span class="line">    <span class="comment">// 参数2 分页参数(评论数据的id) 第一条获取默认设置null</span></span><br><span class="line">    <span class="keyword">const</span> ret = <span class="keyword">await</span> <span class="title function_">getComments</span>(<span class="variable language_">this</span>.<span class="property">articleId</span>, <span class="variable language_">this</span>.<span class="property">offset</span>)</span><br><span class="line">    <span class="comment">// 把回去的评论输入 全部添加到页面数据中储存</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(...ret.<span class="property">data</span>.<span class="property">results</span>)</span><br><span class="line">    <span class="comment">// 修改本次加载的状态位</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">loading</span> = <span class="literal">false</span></span><br><span class="line">    <span class="comment">// 判断结束的条件(评论分页是根据评论数据id来加载分页的 如果不返回新的评论数据id 就说明已经没有评论了)</span></span><br><span class="line">    <span class="comment">// last_id是服务器返回的新评论id 需要把页面的分页参数(评论数据id)设置为 服务器返回的新评论数据id</span></span><br><span class="line">    <span class="comment">// 如果为空(false)说明没有数据了 设置分页加载完毕的状态位</span></span><br><span class="line">    <span class="keyword">if</span> (ret.<span class="property">data</span>.<span class="property">last_id</span>) &#123; <span class="comment">// 如果还有新数据(true) 继续加载评论分页</span></span><br><span class="line">      <span class="comment">// 把服务器返回的新评论id 设置给页面的分页参数(评论数据id)</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">offset</span> = ret.<span class="property">data</span>.<span class="property">last_id</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 如果服务器不返回新的评论id 说明已经没有评论数据了 把加载完整状态位设置为true</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">loading</span> = <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>调用接口；获取数据；填充页面</li>
<li>判断分页结束的条件（理解），类似于基于时间戳的分页策略</li>
</ol>
</blockquote>
<h3 id="文章评论功能-ArticleComment-vue"><a href="#文章评论功能-ArticleComment-vue" class="headerlink" title="文章评论功能 ArticleComment.vue"></a>文章评论功能 <code>ArticleComment.vue</code></h3><blockquote>
<p>目标：实现评论功能</p>
<p>效果: 用户输入数据 点击发送 上传到服务器 并且渲染到页面上</p>
</blockquote>
<ul>
<li><code>template</code>模板<ul>
<li>绑定事件(主模板已设置)</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span class=&quot;submit&quot; @click=&quot;handleSubmit()&quot; slot=&quot;button&quot;&gt;提交&lt;/span&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><strong><code>script</code></strong> <strong>脚本</strong>  <strong><code>methods</code></strong> 函数方法<ul>
<li>实现评论回复功能</li>
<li>上传评论 需要两个参数<ul>
<li>文章的id </li>
<li>评论的内容</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ~ 设置发表评论的方法</span></span><br><span class="line"><span class="keyword">async</span> sendComment () &#123;</span><br><span class="line">  <span class="comment">// 发表评论</span></span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="comment">// 调用发表评论的接口 上传评论数据</span></span><br><span class="line">    <span class="keyword">await</span> <span class="title function_">comment</span>(&#123;</span><br><span class="line">      <span class="comment">// 发表评论 需要两个参数 文章的id 和 评论的内容</span></span><br><span class="line">      <span class="attr">target</span>: <span class="variable language_">this</span>.<span class="property">articleId</span>, <span class="comment">// 文章的id 左侧是服务器规定的属性名</span></span><br><span class="line">      <span class="attr">content</span>: <span class="variable language_">this</span>.<span class="property">value</span> <span class="comment">// 评论的内容 左侧是服务器规定的属性名</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">// 发表评论成功后 置空储存的之前评论</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">list</span> = []</span><br><span class="line">    <span class="comment">// 发表评论成功后 置空分页参数 重新获取评论数据</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">offset</span> = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 调用获取评论数据的方法 重新获取评论数据</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">onLoad</span>()</span><br><span class="line">    <span class="comment">// 置空评论的输入框</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">value</span> = <span class="string">&#x27;&#x27;</span></span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="comment">// 如果评论失败 提示用户</span></span><br><span class="line">    <span class="variable language_">this</span>.$toast(<span class="string">&#x27;评论文章失败&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>调用接口，处理异常</li>
<li>try catch 处理async函数，await是必要的</li>
</ol>
</blockquote>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/12/Vue_Mobile_Projects/9_Articles/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/12/Vue_Mobile_Projects/9_Articles/";
            const title         = "「8. Vue移动端 文章页面内容和功能」";
            const excerpt       = `::: tip 介绍
Vue移动端 文章内容 点赞 关注 评论 等功能:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vant/" rel="tag">Vant</a>, <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="tag-none-link" href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">Vue移动端</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 7. Vue移动端 搜索功能设置" href="/2021/06/11/Vue_Mobile_Projects/8_search/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 9. Vue移动端 个人中心设置" href="/2021/06/13/Vue_Mobile_Projects/last_my/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>